<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
</head>
<body>

    <label>请输入北京今天空气质量：<input id="aqi-input" type="text"></label>
    <button id="button">确认填写</button>

    <div>您输入的值是：<span id="aqi-display">尚无录入</span></div>

<script type="text/javascript">

(function() {
    /*  
    在注释下方写下代码
    给按钮button绑定一个点击事件
    在事件处理函数中
    获取aqi-input输入的值，并显示在aqi-display中
    */

    //查找元素
    function $(id) {
        return document.getElementById(id);
    }

    function handle() {
        var num = $("aqi-input").value.trim(); 

        if (!isNaN(num) && num !== "") {
            $("aqi-display").innerHTML = num;
        } else {
            alert("your input is not a number, please enter again!");
        }
    }

    // 给按钮绑定事件
    $("button").onclick = handle;
    
    //在输入框输入数字后回车触发事件
    $("aqi-input").onkeyup = function (event) {
        if (event.keyCode === 13) {
            handle();
        }
    }
})();

</script>
</body>
</html>